<template>
  <div :class="['banner_module-wrapper', {on:isOn}]">
    <div class="banner_module-bg-wrapper">
      <div class="banner_module-bg" />
    </div>
    <swiper :options="swiperOptions" class="banner-swiper" ref="mySwiper">
      <swiper-slide :id="banner.image" :key="index" v-for="(banner, index) in banners">
        <mivaLink :isNewTag="true" :to="banner.href" class="swiper_slide-wrapper">
          <img :src="banner.image|bannerCover" class="banner_module-image" />
          <div class="banner_module-title">{{banner.title}}</div>
        </mivaLink>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination" />
    </swiper>
    <div class="hot-module-wrapper">
      <div :key="index" class="hot-module" v-for="(hot,index) in hotData">
        <mivaLink :title="hot.title" :to="hot.href">
          <el-image :src="hot.cover|hotCoverSize" class="hot-module-cover" fit="cover" />
          <div class="hot-module-info">
            <h3>{{hot.title}}</h3>
            <div style="margin-top:10px">
              <span class="iconfont icon-shuju">{{hot.hit}}</span>
              <span class="iconfont icon-dianzan1">{{hot.comment_count}}</span>
            </div>
            <span class="info">{{hot.description | desc}}</span>
          </div>
        </mivaLink>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import { getBannersData, getHotData } from '@/api/bannerModule';
import defaultData from './defaultData.json';

export default {
    name: 'BannerModule',
    components: { Swiper, SwiperSlide },
    directives: {
        swiper: directive,
    },
    filters: {
        desc(str) {
            return str.length < 40 ? str : `${str.slice(0, 40)}...`;
        },
        bannerCover(str) {
            return str;
        },
        hotCoverSize(str) {
            return `${str}?x-oss-process=image/resize,m_fill,w_195,h_116`;
        },
    },
    data() {
        return {
            isOn: false,
            timer: null,
            banners: defaultData.banners,
            hotData: defaultData.hotData,
            swiperOptions: {
                loop: true,
                grabCursor: true,
                forceToAxis: true,
                autoplay: {
                    delay: 5000,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                on: {
                    slideChange() {
                        if (!this.parent) {
                            this.parent = document.querySelector('.banner_module-bg');
                        }
                        const image = Object.values(this.slides)[this.activeIndex].id;
                        this.parent.style = `background-image:url(${image})`;
                    },
                },
            },
        };
    },
    mounted() {
        this.animationStart();
    // this.getBannersData();
    // this.getHotData();
    },
    destroyed() {
        this.animationStop();
    },
    methods: {
        animationStart() {
            this.timer = setInterval(() => { this.isOn = !this.isOn; }, 6000);
        },
        animationStop() {
            clearInterval(this.timer);
        },
        async getBannersData() {
            try {
                const bannersData = await getBannersData();
                this.banners = bannersData.data;
            } catch (error) {
                console.error('请求banners数据出错,启用备用数据', error);
            }
        },
        async getHotData() {
            try {
                const hotData = await getHotData();
                this.hotData = hotData.data;
            } catch (error) {
                console.error('请求hot数据出错,启用备用数据', error);
            }
        },
    },
};
</script>

<style lang="less" >
@bannerTitleH: 30px;

.swiper-container {
  --swiper-pagination-color: @base_color;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 30px;
}
.swiper-pagination-bullet {
  width: 15px !important;
  height: 15px !important;
  background-color: #fff;
  opacity: 0.6;
  box-shadow: 0 0 0 2px fade(#000, 50%);
  &-active {
    background-color: @base_color !important;
  }
}

.swiper-pagination {
  display: inline-block;
  position: absolute;
  bottom: 50px;
  right: 0;
  text-align: right;
}
.banner_module-wrapper {
  width: 100%;
  margin-bottom: 30px;
  padding: 50px 20px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: #000;
  background-image: url("~@/assets/bannerModule_bg.png");
  background-position: -0.5px;
  background-size: 50px;
  // border: 5px solid @base_color;
  // box-shadow: 5px -5px 0px @base_color_2;

  &.on .banner_module-bg-wrapper {
    animation: bgTwinkle 1s 5s linear infinite;
  }

  .banner_module-bg-wrapper {
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .banner_module-bg {
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(4px);
    background-origin: content-box;
    background-position: center center;
    opacity: 0.7;
    animation: bgRun 20s linear infinite alternate;
  }

  .banner-swiper {
    width: 500px;
    height: 242px;
    margin: 0;
    flex-shrink: 0;
    border-radius: 4px;
    opacity: 0.9;
    position: relative;
  }

  .swiper_slide-wrapper {
    width: 100%;
    height: 100%;
  }

  .banner_module-image {
    width: 100%;
    height: 100%;
    transition: @globalTransition;
    object-fit: cover;
  }

  .banner_module-title {
    width: 100%;
    height: @bannerTitleH;
    line-height: @bannerTitleH;
    padding: 0 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
  }
}

.hot-module-wrapper {
  width: 100%;
  height: 100%;
  height: 242px;
  margin-left: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;

  .hot-module {
    width: 195px;
    height: 116px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    opacity: 0.9;
    cursor: pointer;

    &:nth-child(n + 4) {
      margin-top: 5px;
    }
  }

  .hot-module-cover {
    transition: @globalTransition;
  }

  .hot-module-info {
    width: 195px;
    height: 116px;
    padding: 0 3px;
    position: absolute;
    top: 0;
    left: 0;
    transition: @globalTransition;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    opacity: 0;
    transform: scale(1.36) rotateZ(15deg);
    font-size: 12px;

    .iconfont {
      margin-right: 10px;
      font-size: 12px;
    }

    .info {
      display: block;
      text-align: justify;
      margin-top: 10px;
    }
  }

  .hot-module:hover {
    .hot-module-cover {
      transform: scale(1.3) rotateZ(15deg);
    }

    .hot-module-info {
      opacity: 1;
      transform: scale(1) rotateZ(0);
    }
  }
}

@keyframes bgRun {
  0% {
    background-position-x: -100px;
    background-position-y: -100px;
  }

  100% {
    background-position-x: calc(100% + 100px);
    background-position-y: calc(100% + 100px);
  }
}

@keyframes bgTwinkle {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0.7;
  }
  10% {
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  30%,
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0.7;
  }
}
</style>
